<script setup>
import axios from 'axios';
import { computed, onMounted, ref } from 'vue';

const dataList=ref([])
const form=ref({
  creator:'huohuo',
  name:'',
  price:''
})

const getData=async()=>{
  const res=await axios.get('https://applet-base-api-t.itheima.net/bill?creator=huohuo')
// console.log(res);
dataList.value=res.data.data
}

const postData=async()=>{
  console.log(form.value);
  
  axios.post('https://applet-base-api-t.itheima.net/bill',form.value)
  form.value.name=''
  form.value.price=''

}
//列表数据
onMounted(async()=>{

getData()



})

//新增数据
const add=async()=>{
  if(form.value.name==''||form.value.price==''){
    alert('请输入完整的信息')
    return
  }

 //奇怪,res打印不出来
await postData()
await getData()


}




//删除数据
const delData=async(id)=>{
  axios.delete(`https://applet-base-api-t.itheima.net/bill/${id}`)
  getData()
}

const del=(id)=>{
delData(id)
}

//zongji
const total=computed(()=>{
  return dataList.value.reduce((pre,cur)=>{
    return pre+cur.price
  },0)
})


</script>

<template>
 
    <div class="contain">
      <!-- 左侧列表 -->
      <div class="list-box">

        <!-- 添加资产 -->
        <form class="my-form">
          <input type="text" class="form-control" placeholder="消费名称" v-model.trim="form.name"/>
          <input type="text" class="form-control" placeholder="消费价格" v-model.number="form.price"/>
          <button type="button" class="btn btn-primary" @click="add">添加账单</button>
        </form>

        <table class="table table-hover">
          <thead>
            <tr>
              <th>编号</th>
              <th>消费名称</th>
              <th>消费价格</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item,index) in dataList" :key="item.id">
              <td>{{index+1}}</td>
              <td>{{item.name}}</td>
              <!-- 根据数据动态设置class -->
              <td :class="{red:item.price>300}">{{item.price}}</td>
              <td><a href="javascript:;" @click="del(item.id)">删除</a></td>
            </tr>
            <!-- <tr>
              <td>2</td>
              <td>大衣</td>
              <td class="red">199.00</td>
              <td><a href="javascript:;">删除</a></td>
            </tr> -->
          </tbody>
          <tfoot>
            <tr>
              <td colspan="4">消费总计： {{ total }}</td>
            </tr>
          </tfoot>
        </table>
      </div>

      <!-- 右侧图表 -->
      <!-- <div class="echarts-box" id="main"></div> -->
    </div>
 
</template>

<style scoped>
@import url(https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css);

.red {
  color: red !important;
}

.search {
  width: 300px;
  margin: 20px 0;
}

.my-form {
  display: flex;
  margin: 20px 0;
}

.my-form input {
  flex: 1;
  margin-right: 20px;
}

.table> :not(:first-child) {
  border-top: none;
}

.contain {
  display: flex;
  padding: 10px;
}

.list-box {
  flex: 1;
  padding: 0 30px;
}

.list-box a {
  text-decoration: none;
}

.echarts-box {
  width: 600px;
  height: 400px;
  padding: 30px;
  margin: 0 auto;
  border: 1px solid #ccc;
}

tfoot {
  font-weight: bold;
}

@media screen and (max-width: 1000px) {
  .contain {
    flex-wrap: wrap;
  }

  .list-box {
    width: 100%;
  }

  .echarts-box {
    margin-top: 30px;
  }
}
</style>